feat(common): add support for MCP configuration in component setup #3469
Conversation
WalkthroughSupport for a new prop, Changes
Sequence Diagram(s)sequenceDiagram
participant App
participant Component
participant GlobalMcpConfig
App->>GlobalMcpConfig: registerMcpConfig(mcpConfig, defineTool)
App->>Component: Mount with props (may include tiny_mcp_config)
Component->>GlobalMcpConfig: getComponentMcpConfig(componentName)
alt MCP config and tiny_mcp_config and tool creator exist
Component->>GlobalMcpConfig: Call defineTool(instance, tiny_mcp_config, componentMcpConfig)
end
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/vue-common/src/index.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/vue-common/src/index.ts(4 hunks)
🔇 Additional comments (4)
packages/vue-common/src/index.ts (4)
51-51: LGTM: Prop definition follows established patterns.The addition of
tiny_mcp_configas an Object type follows the existing naming convention and structure of othertiny_props.
63-73: LGTM: Consistent type and runtime prop definitions with improved formatting.The addition of
tiny_mcp_configmaintains consistency between the TypeScript type definition and the runtime props array. The formatting improvement with each prop on a separate line enhances readability.
183-187: 🛠️ Refactor suggestionAdd null safety to prevent potential runtime errors.
The function logic is sound, but it could throw runtime errors if
mcpConfigis null or undefined when accessing thecomponentsproperty.Apply this diff to add null safety:
const getComponentMcpConfig = () => { const mcpConfig = globalMcpConfig.mcpConfig const componentName = getComponentName().replace($prefix, '') - return mcpConfig?.components?.[componentName] + return mcpConfig?.components?.[componentName] || null }Likely an incorrect or invalid review comment.
189-192:❓ Verification inconclusive
Consider potential SSR and multi-instance implications.
The global configuration pattern is appropriate for this use case. However, verify that this global state approach is compatible with SSR environments and multiple app instances.
🏁 Script executed:
#!/bin/bash # Description: Check for SSR-related code or multi-instance patterns in the codebase # Expected: Find patterns that might indicate SSR usage or multi-instance scenarios echo "Searching for SSR-related patterns..." rg -i "ssr|server.*side|nuxt|next\.js" --type ts --type js echo -e "\nSearching for multi-app or instance patterns..." rg -i "createApp|multiple.*app|app.*instance" --type ts --type jsLength of output: 20630
Verify SSR and multi-instance safety of globalMcpConfig
We didn’t find any direct issues in the
vue-commonimplementation, but since the repo includes SSR hooks and multiple app-instance patterns, please ensure that your module-levelglobalMcpConfigwon’t bleed state across server requests or separate Vue app instances.Key spots to review:
- internals/unplugin-virtual-template/src/nuxt.ts
(Nuxt hooks imply SSR usage—module variables persist across requests)- Multiple
createAppcalls
(e.g. examples/vue3/src/main.ts, packages/vue/src/… services append todocument.body)If needed, scope or reset
globalMcpConfigper request/app initialized to avoid cross-instance crosstalk.
| const componentMcpConfig = getComponentMcpConfig() | ||
| if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) { | ||
| globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling to prevent component setup crashes.
The conditional logic is well-structured, but the MCP tool creation call could potentially throw errors that would crash the component setup process.
Apply this diff to add error handling:
const componentMcpConfig = getComponentMcpConfig()
if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) {
- globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
+ try {
+ globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
+ } catch (error) {
+ console.warn('Failed to create MCP tools:', error)
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const componentMcpConfig = getComponentMcpConfig() | |
| if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) { | |
| globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig) | |
| } | |
| const componentMcpConfig = getComponentMcpConfig() | |
| if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) { | |
| try { | |
| globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig) | |
| } catch (error) { | |
| console.warn('Failed to create MCP tools:', error) | |
| } | |
| } |
🤖 Prompt for AI Agents
In packages/vue-common/src/index.ts around lines 307 to 310, the call to
globalMcpConfig.createMcpTools may throw errors that could crash the component
setup. Wrap this call in a try-catch block to catch any exceptions, log or
handle the error appropriately, and prevent the component from crashing during
setup.
| export const registerMcpConfig = (mcpConfig, defineTool) => { | ||
| globalMcpConfig.mcpConfig = mcpConfig | ||
| globalMcpConfig.createMcpTools = defineTool | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve type safety with more specific type definitions.
The function works correctly but uses overly generic types that could lead to runtime errors and poor developer experience.
Consider adding more specific type definitions:
+interface McpConfig {
+ components?: Record<string, any>
+ [key: string]: any
+}
+
+interface McpToolCreator {
+ (vm: any, propConfig: any, componentConfig: any): void
+}
+
-export const registerMcpConfig = (mcpConfig, defineTool) => {
+export const registerMcpConfig = (mcpConfig: McpConfig, defineTool: McpToolCreator) => {
globalMcpConfig.mcpConfig = mcpConfig
globalMcpConfig.createMcpTools = defineTool
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const registerMcpConfig = (mcpConfig, defineTool) => { | |
| globalMcpConfig.mcpConfig = mcpConfig | |
| globalMcpConfig.createMcpTools = defineTool | |
| } | |
| interface McpConfig { | |
| components?: Record<string, any> | |
| [key: string]: any | |
| } | |
| interface McpToolCreator { | |
| (vm: any, propConfig: any, componentConfig: any): void | |
| } | |
| export const registerMcpConfig = (mcpConfig: McpConfig, defineTool: McpToolCreator) => { | |
| globalMcpConfig.mcpConfig = mcpConfig | |
| globalMcpConfig.createMcpTools = defineTool | |
| } |
🤖 Prompt for AI Agents
In packages/vue-common/src/index.ts around lines 194 to 197, the function
registerMcpConfig uses overly generic parameter types which reduces type safety
and developer experience. Update the function signature to use more specific
type definitions for mcpConfig and defineTool based on their expected structures
or interfaces. This will help catch type errors at compile time and improve code
clarity.
feat(common): 在组件设置中添加对 MCP 配置的支持
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
tiny_mcp_configprop, allowing components to accept additional configuration options.